Page history of 웹 프론트엔드 개발

HTML / CSS / JavaScript 개발을 포괄해서 웹 프론트엔드 개발이라고 한다. 웹 퍼블리싱, 웹 코딩 등으로 불리기도 한다.

패키지 관리

CSS, JavaScript 패키지들을 쉽게 설치해주는 도구로 bower가 있다. 웹 개발의 필수 도구다.

HTML / CSS 베스트 프랙티스

CSS 설계 원칙

CSS 문제 해결

IE CSS Hack

float 엘리먼트의 컨테이너의 height가 0이 되는 문제

IE6 position:absolute bug

파일 업로드 버튼 CSS로 꾸미기

IE6 png 투명 문제

도구

• 1 pixel을 위한 도구 : http://pitaschio.ara3.net/download.htm
• bootstrap 버튼 생성기 http://charliepark.org/bootstrap_buttons/
• Firebug
• IE8
• Debugbar
• IETester

• Firefox + Html Validator [홈페이지]

  • W3C 에서 제공하는 도구는 찾아가서 웹 페이지를 테스트 하는데 불편하다.
  • Firefox 에 Html Validator 를 설치하면 별도의 Validation Check 를 하지 않아도 항상 실시간으로 브라우저 우측 하단의 상태 표시줄에 Validation 검증 결과가 표시된다.
  • W3C의 검사결과에 준하는 검증결과를 위해서 Html Validator 의 옵션에서 알고리즘을 SGML Parser 로 선택해야 한다.
    SGML Parser는 W3C에서 제공하는 검사결과와 거의 동일한 결과를 출력한다.
• http://www.cleancss.com : css 정리, 문법 검사

• HTML 코드 정리하기

  • TIDY 가 가장 유명한데 설정하는 법을 좀 파봐야 할듯. 지금은 " 다음에 줄바꿈을 해버리고 블럭 사이에 빈줄 들어가는등 사용할만큼 되지 못함.
  • 내가 사용하는 방식은 IE 개발자 도구 에서 OuterHtml 복사 > Dreamweaver 에서 소스 코드 포맷팅 실행 > 이클립스에서 두개의 공백을 탭으로 전환
    이렇게 하면 거의 내가 원하는 형태가 만들어진다.

• HTML 에디터

  • JetBrains RubyMine, IntelliJ IDEA

    • HTML 편집 기능에서 드림위버에 거의 근접하면서 다른 기능들이 잘 붙어 있고 이클립스보다 월등히 빠르다.
  • JetBrains WEB IDE : RubyMine HTML/CSS가 좋다고 피드백을 보냈더니 그 목적이라면 WEB IDE를 추천한다면서 http://www.jetbrains.net/confluence/display/WI/Web+IDE+EAP를 보내줌.

  • Dreamweaver

    • HTML 편집만 놓고 보면 가장 빠르고 편리하다.
    • 일반적인 텍스트 편집 기능, 프로젝트 관리 기능, 버전 관리 통합 등이 만족스럽지 않다.

  • Eclipse Web Tools

    • 공짜 중에는 그나마 쓸만한
    • 이클립스가 너무 느리다.

  • Aptana

    • Web Tools보다 HTML 편집 기능은 약간 나은데 수많은 단점이 있다. 비추

• CSS 3 도구

  • http://gradients.glrzad.com/ CSS 3 그라데이션
  • http://lea.verou.me/css3patterns/ CSS 배경 패턴 갤러리